

<template>
  <div class="huoqipage">
     <div class="breakline">
        当前位置：账户查询>账户信息查询><span>活期账户</span>
     </div>
     <div class="selectline">
        <el-checkbox v-model="checked">筛选</el-checkbox>
         <div class="iconfont icon-bangzhu1"></div>
     </div>
    <div class="tablepage">
<div class="table-container">
<table class="account-table">
<thead >
<tr style="background: #C7E0F4;">

<th style="background: #C7E0F4;">任务名称 <span class="iconfont icon-expand-up-down-fill"></span></th>
<th style="background: #C7E0F4;">任务设定日期 <span class="iconfont icon-expand-up-down-fill"></span></th>
<th style="background: #C7E0F4;">起止日期 <span class="iconfont icon-expand-up-down-fill"></span></th>
<th style="background: #C7E0F4;">账号 <span class="iconfont icon-expand-up-down-fill"></span></th>
<th style="background: #C7E0F4;">批次号 <span class="iconfont icon-expand-up-down-fill"></span></th>
<th style="background: #C7E0F4;"> 文件状态<span class="iconfont icon-expand-up-down-fill"></span></th>
<th style="background: #C7E0F4;">下载 <span class="iconfont icon-expand-up-down-fill"></span></th>

</tr>
</thead>
<tbody style="background: #ECF3FB;">
<tr>

<td>活期账户明细1106 <br>11:10</td>
<td>20251106</td>
<td>{{start=='20240101'?'20240101':'20250101'}}-{{start=='20240101'?'20241231':'20251231'}}</td>
<td>32001647136052522743</td>
<td>1</td>
<td>执行成功</td>
<td class="link " @click="downfiles">下载Excel</td>

</tr>
</tbody>
</table>


<div class="actions">
<button>返回</button>

</div>
</div>


<div class="tips">
<h4>温馨提示</h4>
<p>1.异步下载任务设定日期是您预约下载操作的日期，并非明细起止时间，您可以通过任务设定日期筛选已设定的异步下载任务。</p>
<p>2.因文件容量较大，每次查询的明细文件分批返回，下载相邻两批次的时间间隔请勿超过4小时，否则系统缓存失败需重新查询下载。</p>

</div>
</div>
  </div>
</template>

<script>
export default {
data(){
    return{
       selectAll: false,
selected: false,
start:''

    }
},
mounted(){
    this.start=localStorage.getItem('start')
},
methods: {
downfiles(){
     const link = document.createElement("a");
      link.href =  this.start=='20240101'?"/files/2.江苏知己建行24.01-24.12流水.xlsx":"/files/6.江苏知己建行25.01-25.09.xls"
      link.download =this.start=='20240101'? "活期账户明细20241010161110511255227431.xlsx":"活期账户明细20251010161110511255227431.xlsx"; // 下载时的文件名
      link.click();
      this.$router.push({
        path:'/end'
      })
},
}
}
</script>

<style lang='less' scoped>
.huoqipage{
    width: 100%;
    .breakline{
        width: 100%;
        display: flex;
        align-items: center;
        background: #F5F4F9;
        border: 1px solid #cccccc;
        box-sizing: border-box;
        font-size: 0.8rem;
        padding: 0.5rem 0.3rem;
        span{
            font-weight: bold;
        }
    }
    .selectline{
        width: 100%;
        box-sizing: border-box;
        background: white;
        display: flex;
        align-items: center;
      
        padding: 1rem 0.8rem;
       .iconfont{
        color: #1E90FF;
        margin-left: .2rem;
       }
     
    }
    .tablepage {

font-family: Arial, sans-serif;
color: #333;
font-size: 14px;
}
.account-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
border: 1px solid #259dff;
text-align: center;
}
/deep/.account-table thead tr{
   background:#C7E0F4;
}
.account-table th,
.account-table td {

padding: 8px 6px;
text-align: center;
.iconfont{
    color: #258BBF;
}

}
.account-table th {
background: #f7f7f7;
color: #333;
font-weight: bold;

}
.link {
color: #004b96;
cursor: pointer;
}
.actions {
padding: 2rem 0 3rem 0;
display: flex;
align-items: center;
justify-content: center;
background: white;
}
.actions button {
margin-right: 18px;
padding: 6px 20px;
border: 1px solid #1E90FF;
background: #2391D7;
color: #ffffff;
cursor: pointer;
border-radius: 4px;
}
.actions button:hover {
background: #1E90FF;
color: #fff;
}
.pageline{
    width: 100%;
   box-sizing: border-box;
   padding: 0.3rem 0.5rem;
   background: #F8FAF5;
   border: 1px solid #cccccc;
    .selectline{
           background: #F8FAF5;
    }
    .fenye{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .home{
             color: #488FBB;
             margin-right: 0.2rem;
        }
        .shang{
           
            margin-right: 0.2rem;
        }
        .ye{
            margin-right: 0.2rem;
            border: 1px solid gray;  
            padding:0.1rem 0.2rem; 
        }
        .xia{
            margin-right: 0.2rem;
        }
        .all{
            
        }
        .tiao{
            display: flex;
            align-items: center;
            margin-right: 0.2rem;
            .box{
                width: 2rem;
                height: 1rem;
                border: 1px solid gray;
                margin-right: 0.2rem;
            }
        }
        .zhuan{
            color: #488FBB;
        }
    }
}
.tips{
    width: 100%;
    background:#F6FAFD;
    padding: 1rem 0.5rem;
    margin-bottom: 2rem;
   
}
.tips h4 {
color: #e7160e;

}
.tips p {
margin: 3px 0;

}
.shuaxin{
    font-weight: bold;
    color: #488FBB;
}
}
</style>